<template>
  <el-row :gutter="20">
    <!-- 左侧部门树 -->
    <el-col :span="4" :xs="24">
      <el-menu
        active-text-color="#409eff"
        class="el-menu-vertical-demo"
        :default-active="defaultActive"
        text-color="#001529"
        ref="menuRef"
        @select="selectMenu"
      >
        <div v-for="item in list" :key="item">
          <el-menu-item :index="item.id">
            <span class="menu">
              <span>{{ item.name }}</span>
            </span>
          </el-menu-item>
        </div>
      </el-menu>
    </el-col>
    <el-col :span="20" :xs="24">
      <ContentWrap>
        <!-- 搜索栏 -->
        <el-form
          ref="queryFormRef"
          :inline="true"
          :model="fieldParams"
          class="-mb-15px"
          label-width="90px"
        >
          <el-form-item label="资源名称" prop="fieldDesc">
            <el-input
              v-model="queryParams.name"
              class="!w-240px"
              clearable
              placeholder="请输入字段名称"
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="queryParams.createTime"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-240px"
              end-placeholder="结束日期"
              start-placeholder="开始日期"
              type="daterange"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon class="mr-5px" icon="ep:refresh" />
              重置
            </el-button>
            <el-button v-hasPermi="['housing:book:add']" plain type="primary" @click="upload">
              <Icon class="mr-5px" icon="ep:plus" />
              上传资源
            </el-button>
          </el-form-item>
        </el-form>
      </ContentWrap>
      <!-- 列表 -->
      <ContentWrap>
        <el-table v-loading="loading" :data="fileList">
          <el-table-column align="center" label="编号" prop="id" />
          <el-table-column align="center" label="字段标识" prop="name" />
          <el-table-column align="center" label="格式" prop="ext" />
          <el-table-column
            :formatter="dateFormatter"
            align="center"
            label="创建时间"
            prop="createTime"
            width="180"
          />
          <el-table-column :width="300" align="center" label="操作">
            <template #default="scope">
              <el-button
                v-hasPermi="['housing:book:delete']"
                link
                type="danger"
                @click="handleDelete(scope.row.id)"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </ContentWrap>
    </el-col>
  </el-row>

  <UploadFile ref="uploadRef" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { dateFormatter } from '@/utils/formatTime'
import UploadFile from '@/views/common/UploadFile.vue'
import { useRoute } from 'vue-router'
import * as metaApi from '@/api/meta'
import * as resourceApi from '@/api/resource'

const queryParams = ref({})

const route = useRoute()

const uploadRef = ref<any>()

const defaultActive = ref('0')

const fieldType = ref('0')
const data = ref({})
const fileList = ref([])
const list = ref([
  {
    name: 'XML',
    id: '0',
    field: 'xml'
  },
  {
    name: '全书PDF',
    id: '1',
    field: 'whole_pdf'
  },
  {
    name: '章节PDF',
    id: '2',
    field: 'chapter_pdf'
  },
  {
    name: 'HTML',
    id: '3',
    field: 'html'
  },
  {
    name: 'EPub',
    id: '4',
    field: 'epub'
  },
  {
    name: 'Mobi',
    id: '5',
    field: 'mobi'
  }
])

const upload = () => {
  uploadRef.value.openDialog(route.query.id, fieldType.value)
}

const selectMenu = async (index) => {
  fileList.value = []
  fieldType.value = index
  if (index == '0') {
    if (data.value.xml) {
      fileList.value = await resourceApi.selectList(data.value.xml)
    }
  }
  if (index == '1') {
    if (data.value.wholePdf) {
      fileList.value = await resourceApi.selectList(data.value.wholePdf)
    }
  }
  if (index == '2') {
    if (data.value.chapterPdf) {
      fileList.value = await resourceApi.selectList(data.value.chapterPdf)
    }
  }
  if (index == '3') {
    if (data.value.html) {
      fileList.value = await resourceApi.selectList(data.value.html)
    }
  }
  if (index == '4') {
    if (data.value.epub) {
      fileList.value = await resourceApi.selectList(data.value.epub)
    }
  }
  if (index == '5') {
    if (data.value.mobi) {
      fileList.value = await resourceApi.selectList(data.value.mobi)
    }
  }
  console.log(fileList)
}

const getList = () => {
  selectMenu(fieldType.value)
}

const getData = async () => {
  data.value = await metaApi.selectMetaDataOne(route.query.id)
  if (data.value.xml) {
    fileList.value = await resourceApi.selectList(data.value.xml)
  }
}

provide('getList', getList)

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.body {
  margin: 0;
}

.el-menu-item .menu {
  margin: 0 auto;
}
</style>
